<!-- eslint-disable vue/prop-name-casing -->
<!--
  实现应用详情中发布应用的页面
-->
<script>
import { publishAppToAppStore } from '@/api/appstore'
import { getPublishedApp, updateApp } from '@/api/appstore'

export default {
  props: {
    app_id: {
      type: Number,
      required: true,
      default: null
    },
    app_name: {
      type: String,
      required: true,
      default: null
    },
    app_description: {
      type: String,
      required: true,
      default: null
    }
  },
  data() {
    return {
      publishMode: 'new', // 发布模式，'new' 表示新建应用，'update' 表示更新应用
      isUpdate: false, // 判断发布模式
      appList: [], // 应用商店中的该用户已经发布的应用
      appName: this.app_name, // 应用将要被发布为的名称
      appDescription: this.app_description, // 应用将要被发布为的描述
      chatAppName: '', // 记录新将要被发布的应用名称
      chatAppDescription: '', // 记录将要被发布的应用描述
      storeID: 0 // 要重新发布的应用的 store_id
    }
  },
  async mounted() {
    await this.loadList()
    console.log('appList:', this.appList)
    if (this.appList.length > 0) {
      // console.log('触发自动选择')
      this.publishMode = 'update'
      this.inputModeChange('update')
      this.handleSelect(this.appList[0])
    }
  },
  methods: {
    inputModeChange(select) {
      if (select === 'new') {
        // console.log('选择新建模式')
        this.isUpdate = false
      } else {
        // console.log('选择更新模式')
        this.isUpdate = true
      }
    },
    handleSelect(item) {
      // console.log('选择器选中', item)
      this.chatAppName = item.app_name
      this.chatAppDescription = item.app_description
      this.storeID = item.store_id
    },
    async loadList() {
      const response = await getPublishedApp(this.app_id).catch(error => {
        console.log('元芳获取已发布的应用出错', error)
        return []
      })
      this.appList = response
    },
    // 发布应用
    publishApp(appDetail) {
      if (this.appName === '' || this.appDescription === '') {
        this.$message({
          message: this.$t('name_or_description_null'),
          type: 'error'
        })
        return
      }
      // 深拷贝一份应用脚本
      const app_detail = JSON.parse(JSON.stringify(appDetail))

      // 待审核: approving | 已拒绝: rejected | 已发布: published
      app_detail['approval_status'] = 'approving'
      app_detail.app_name = this.appName
      app_detail.app_description = this.appDescription
      // console.log('尝试发布应用', appDetail)
      if (this.isUpdate) {
        console.log('更新应用时的应用名称:', this.appName, app_detail)
        app_detail['id'] = this.storeID
        updateApp(app_detail).then(response => {
          this.$message({
            message: this.$t('republish_success_tips'),
            type: 'success'
          })
        }).catch(err => {
          console.log('发布应用时发生错误', err)
          this.$message({
            message: this.$t('publish_failure_tips'),
            type: 'error'
          })
        })
      } else {
        publishAppToAppStore(app_detail).then(res => {
          this.$message({
            message: this.$t('publish_success_tips'),
            type: 'success'
          })
        }).catch(err => {
          console.log('发布应用时发生错误', err)
          this.$message({
            message: this.$t('publish_failure_tips'),
            type: 'error'
          })
        })
      }
    }
  }
}
</script>

<template>
  <div class="app-container">
    <el-form>
      <el-form-item :label="this.$t('publish') + this.$t('mode')">
        <el-radio-group v-model="publishMode" @input="inputModeChange">
          <el-radio label="new"> {{ this.$t('publish_as_new_app') }}</el-radio>
          <el-radio label="update"> {{ this.$t('update_existed_app') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="isUpdate">
        <template slot="label">
          <span>
            {{ this.$t('app') + this.$t('name') }}<br>
          </span>
          <span style="font-size: 12px;">
            ({{ this.$t('app') + this.$t('store') }})
          </span>
        </template>
        <el-select v-model="chatAppName" style="width: 80%" filterable placeholder="选择已经发布在应用商店中应用" @change="handleSelect">
          <el-option
            v-for="item in appList"
            :key="item.store_id"
            :label="item.app_name"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isUpdate">
        <template slot="label">
          <span>
            {{ this.$t('app') + this.$t('description') }}<br>
          </span>
          <span style="font-size: 12px;">
            ({{ this.$t('app') + this.$t('store') }})
          </span>
        </template>
        <el-input v-model="chatAppDescription" style="width: 80%" :autosize="{ minRows: 6 }" type="textarea" readonly />
      </el-form-item>
      <el-form-item :label="this.$t('app') + this.$t('name')">
        <el-input v-model="appName" style="width: 80%" />
      </el-form-item>
      <el-form-item :label="this.$t('app') + this.$t('description')">
        <el-input v-model="appDescription" style="width: 80%" :autosize="{ minRows: 6 }" type="textarea" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>
